
<template>
  <div>
    <z-space vertical>
      <h3>form</h3>

      <KeyListenInput></KeyListenInput>

<!--      {{state}}-->
      <z-form-template
          :label-inline="true"
         :def="control.def"
         ref="controlForm"
         @fire="control.onFire"
      >
      </z-form-template>

      <el-divider></el-divider>

      <outer-link href="https://json-schema.org/">json schema文档</outer-link>

      <p>form 格式基于此扩展</p>


      <div>
        <el-button @click="importData">导入</el-button>
      </div>
      <div style="height: 500px; overflow: auto">
        <z-form-template
            :inline="state.inline"
            :slots="search.slots"
            :def="search.def"
            ref="searchForm"
            @fire="search.onFire"
            @ready="onReady"
        >
        </z-form-template>
      </div>


      <vue-code-mirror :tpl="def.tpl" :js="def.js"></vue-code-mirror>

      <p>d1</p>
      <vue-code-mirror  :js="def.d1"></vue-code-mirror>

      <h3>Attributes</h3>
      <doc-props :data="doc.props"></doc-props>

      <h3>Methods</h3>
      <doc-props def-type="Methods" :data="doc.props"></doc-props>

      <h3>Events</h3>
      <doc-props def-type="Events" :data="doc.events"></doc-props>

    </z-space>
  </div>
</template>

<script>
import {
  FormInput,
  FormInputNativeNumber,
  FormInputNativeInteger,
  FormSelect,
  FormRadio,
  FormCheckbox, FormBase, FormTextarea, FormSimpleUploader
} from "@/zpkgs/hooks/form";
import VueCodeMirror from "@example/components/VueCodeMirror";
import DocProps from "@example/plugins/example/components/DocProps";
import OuterLink from "@example/plugins/example/components/OuterLink";
import {createDefaultFormSlot} from "../../../static/ext/form/form-slot-utils";
import KeyListenInput from "@example/views/form/components/KeyListenInput";

export default {
  components: {KeyListenInput, OuterLink, DocProps, VueCodeMirror},
  data() {
    return {
      doc: {
        props: [
          {
            name: 'def',
            type: 'Object',
            defVal: '{}',
            desc: '定义'
          },
          {
            name: 'slots',
            type: 'Object',
            defVal: '{}',
            desc: '插值'
          }
        ],
        methods: [
          {
            name: 'getCurForm',
            params: '',
            desc: '获取当前form'
          },
        ],
        events: [
          {
            name: 'ready',
            params: '{ctx // z-form-template的this}',
            desc: '组件初始化事件'
          },
          {
            name: 'fire',
            params: `[type // 事件名, args // 参数, formCtx // 当前绑定的form context]`,
            desc: 'form 事件转发'
          },
        ]
      },
    }
  },
  setup(props, ctx) {
    const {reactive} = globalThis.vueCompositionAPI
    let search =  {
      slots: {
        object_beforeend: createDefaultFormSlot()
      },
      def: {
        ui: {
          attrs: Object.entries({
            'test-attr': 1,
          })
        },
        properties: {
          text: {
            ...FormInput('文字', {
              ui: {
                watch: ['maxText']
              }
            }),
            rules: [],
          },
          maxText: {
            ...FormInput('最长10个文字', {
              widgetConfig: {
                maxlength: 10
              }
            }),
            rules: [],
          },
          custom: {
            ...FormBase('文字', {
              ui: {
                widget: 'CusCom'
              }
            }),
            rules: [],
          },
          number: {
            ...FormInputNativeNumber('数字'),
            rules: [],
          },
          integer: {
            ...FormInputNativeInteger('整数'),
            rules: [],
          },
          select: {
            ...FormSelect('下拉', {
              options: [
                {
                  label: '选项1',
                  value: 'option1',
                },
                {
                  label: '选项2',
                  value: 'option2',
                }
              ]
            }),
            rules: [],
          },
          remoteSelect: {
            ...FormSelect('远程下拉', {
              widgetConfig: {
                optionsUrl: '/api/dicts',
              }
            }),
            rules: [],
          },
          radio: {
            ...FormRadio('单选', {
              options: [
                {
                  label: '选项1',
                  value: 'option1',
                },
                {
                  label: '选项2',
                  value: 'option2',
                }
              ]
            }),
            rules: [],
          },
          checkbox: {
            ...FormCheckbox('多选', {
              options: [
                {
                  label: '选项1',
                  value: 'option1',
                },
                {
                  label: '选项2',
                  value: 'option2',
                }
              ]
            }),
            rules: [],
          },
          startTime: {
            ...FormBase('日期时间', {
              ui: {
                widget: 'CusDateTimePicker'
              }
            }),
            rules: [],
          },
          actDate: {
            ...FormBase('活动日期', {
              ui: {
                widget: 'CusDatePicker',
                wrap_start_tag: 'el-row',
                wrap_start_tag_attr: `style="display: flex;"`
              }
            }),
            rules: [],
          },
          actTime: {
            ...FormBase('', {
              ui: {
                widget: 'CusTimePicker',
                form_item: {
                  labelWidth: '30px',
                },
                wrap_end_tag: 'el-row',
                styles: [
                  ['margin-left', '20px']
                ]
              }
            }),
            rules: [],
          },
          file: {
            ...FormSimpleUploader('附件', {

            }),
            rules: [],
          },
          textarea: {
            ...FormTextarea('评论', {

            }),
            rules: [],
          },
          arr: {
            type: 'array',
            items: {
              type: 'object',
              properties: {
                val: {
                  type: 'string',
                  ui: {
                    label: 'arr.val',
                    widget: 'CusInput',
                  }
                }
              }
            }
          }
        },
      },
      onFire([type, args, ctx] = []) {
        // console.log(type, args, ctx)
        // let d = ctx.getRawData()
        // console.log(d)
      }
    }

    let control =  {
      def: {
        properties: {
          inline: {
            ...FormBase('inline', {
              ui: {
                widget: 'CusSwitch'
              }
            }),
            rules: [],
          },
        }
      },
      onFire([type, args, ctx] = []) {
        // console.log(type, args, ctx)
        if (type === 'updateValue') {
          // let d = ctx.getDataSync()
          // console.log(d)
          state.inline = args.model.inline
        }
      }
    }

    let state = reactive({
      inline: false
    })

    let def = {
      tpl:
`
<z-form-template
   :slots="search.slots"
   :def="search.def"
    ref="searchForm"
   @fire="search.onFire"
>
</z-form-template>
`,
      js: `search = ${ZY.JSON5.stringify(search, null, 2)};

search.onFire = function([type, args, ctx] = []) {
  // console.log(type, args, ctx)
  let d = ctx.getRawData()
  console.log(d)
}
      `,
      d1: `
  initZForm(Vue, Vue, {
    request: {
      async ['fetch']({apiConfig, type, ctx} = {}) {
        // console.log('fetch', apiConfig, ctx)
        if (type === 'options') {
          let url = '/api' + apiConfig.url
          let [err, res] = await ZY.awaitTo( globalThis.Req.get(url))
          return res.result?.options ?? []
        }
        return Promise.resolve([
        ])
      },
      ['globalVars']() {
        return {
          userinfo: {
            deptName: '说的是多少111',
            realname: '厕所的看会手机导航'
          }
        }
      }
    }
  })
      `
    }

    function importData() {
      console.log(ctx.refs.searchForm.getCurForm())
      setTimeout(() => {
        ctx.refs.searchForm.getCurForm().importData({
          text: '111',
          custom: 1
        })
      }, 1000)
    }

    function onReady() {
      importData()
    }

    return {
      importData,
      onReady,
      search,
      def,
      control,
      state,
    }
  }
}
</script>
